{% extends "shop/admin/base/base.html" %}

{% block body %}
<div>
    <div class="page-header"><h1>商品分类管理</h1></div>
    <div style="margin-bottom: 20px;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加商品分类</button>
    </div>
    <div>
        <table class="table table-bordered table-hover">
           <thead>
              <tr>
                <th style="width: 50px;">序号</th>
                 <th>分类名称</th>
                 <th>操作</th>
              </tr>
           </thead>
           <tbody>
            {% for i, j in class sorted %}
              <tr>
                <td>{{ i }}</td>
                 <td><div style="width: calc({{ j.level }}*30px);float: left;">&nbsp;</div>{{ j.name|safe }}</td>
                 <td width="250">
                     <button class="btn btn-info update" link="/admin/goods/class/{{ j.id }}">修改</button>
                     <button class="btn btn-danger delclass" link="/admin/goods/delclass/{{ j.id }}">删除</button>
                 </td>
              </tr>
            {% endfor %}
           </tbody>
        </table>
    </div>
</div>

            <form class="form-horizontal" role="form" action="" method="post" enctype ="multipart/form-data" runat="server">
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               添加商品分类
            </h4>
         </div>
         <div class="modal-body">
               <div class="form-group">
                   <div class="form-group" style="text-align: center;" id="icatimg">
                        
                   </div>
                  <label for="firstname" class="col-sm-3 control-label">分类名称：</label>
                  <div class="col-sm-9">
                     <input type="text" class="form-control" id="firstname" name="classname"
                        placeholder="请输入分类名称" required>
                  </div>
               </div>
               <div class="form-group">
                  <label for="lastname" class="col-sm-3 control-label">上级分类：</label>
                  <div class="col-sm-9">
                    <select class="form-control" name="upperid">
                        <option value="-1">顶级分类</option>
                        {% for i, j in class sorted %}
                            <option id="{{ j.id }}" value="{{ j.id }}">{{ mstr(j.level, "&nbsp;&nbsp;&nbsp;&nbsp;")|safe }}{{ j.name|safe }}</option>
                        {% endfor %}
                    </select>
                  </div>
               </div>
               <div class="form-group">
                  <label for="imgurl" class="col-sm-3 control-label">分类图标：</label>
                  <div class="col-sm-9">
                     <input type="file" class="form-control" id="imgurl" name="imgurl" runat="server" onchange="previewImage(this, 'icatimg', 100, 100)" required>
                  </div>
               </div>
               <div class="form-group">
                  <label for="bar" class="col-sm-3 control-label">备注：</label>
                  <div class="col-sm-9">
                     <input type="text" class="form-control" id="bar" name="remark" >
                  </div>
               </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <input type="submit" class="btn btn-primary" value="添加">
         </div>
      </div><!-- /.modal-content -->
    </div>
</div><!-- /.modal -->
            </form>

            <form class="form-horizontal" id="uf" role="form" action="" method="post" enctype ="multipart/form-data" runat="server">
<!-- 模态框（Modal） -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="uLabel">
               修改商品分类
            </h4>
         </div>
         <div class="modal-body">
               <div class="form-group" style="text-align: center;" id="catimg">
                    
               </div>
               <div class="form-group">
                  <label for="firstname" class="col-sm-3 control-label">分类名称：</label>
                  <div class="col-sm-9">
                     <input type="text" class="form-control" id="uname" name="classname"
                        placeholder="请输入分类名称" required>
                  </div>
               </div>
               <div class="form-group">
                  <label for="imgurl" class="col-sm-3 control-label">分类图标：</label>
                  <div class="col-sm-9">
                     <input type="file" class="form-control" id="uimgurl" name="imgurl" runat="server" onchange="previewImage(this, 'catimg', 100, 100)" >
                  </div>
               </div>
               <div class="form-group">
                  <label for="bar" class="col-sm-3 control-label">备注：</label>
                  <div class="col-sm-9">
                     <input type="text" class="form-control" id="ubar" name="remark" >
                  </div>
               </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <input type="submit" class="btn btn-primary" value="更新">
         </div>
      </div><!-- /.modal-content -->
    </div>
</div><!-- /.modal -->
        </form>
<script type="text/javascript">
    page = "shop";
    pclass = "goodsclass";

    start = function(){
        $('.delclass').click(function(){
            if(confirm("是否确认删除")){
                alink(this, function(data){
                    if(data=="-1"){
                        bAlert("该分类不是末级分类，不能删除");
                    }else if(data=="0"){
                        bAlert("该分类下还有商品存在，不能删除");
                    }else{
                        bAlert("删除成功");
                        location.reload()
                    }
                });
            }
        });
        $('.update').click(function(){
            alink(this, function(data){
                data = data.class;
                // alert(data.toString());
                $('#uf').attr('action', '/admin/goods/updateclass/'+data.id);
                $('#uname').val(data.name)
                // $('#uupperid').val(data.upperid)
                $('#catimg').html('<img src="/'+data.imgurl+'" style="width: 100px;height: 100px;">')
                $('#ubar').val(data.remarks)
                $('#uimgurl').val('')
                $('#update').modal();
            });
        });
    }
</script>
{% endblock %}